/*
* @version: 1.0
* @Author:  chenweihua
* @Date:    2020-6-8
*/
//图片,视频，文件上传组件
layui.define(['jquery', 'commonJS'], function (exports) {
    var MOD_NAME = 'fileUpload';
    var $ = layui.jquery;
    var commonJS = layui.commonJS;
    var fileArr = []
    //外部接口
    var fileUpload = {
        //事件监听
        on: function (events, callback) {
            return layui.onevent.call(this, MOD_NAME, events, callback);
        },
        render: function (options) {
            var _this = new obj(options);
            _this.render();
            return _this;
        }
    };
    var obj = function (config) {
        videoExts = "mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv";
        imageExts = "jpg,jpeg,png,gif,bmp";
        otherExts = "doc,docx,xls,xlsx,pptx,txt,zip,rar,pdf,ppt,jpg,jpeg,png,gif,bmp";

        //实例化配置
        this.config = $.extend({
            //选择器id或class
            elem: '',
            //图片上传的路径
            url: '',
            delUrl: '',
            type: 0,//0:图片，1:video,2:文件
            //请求成功的回调
            max_file_size: '500mb',
            extensions: [imageExts, videoExts, otherExts],
            flash_swf_url: ctx + 'plupload/Moxie.swf',
            silverlight_xap_url: ctx + 'plupload/Moxie.xap',
            max_retries: 0,
            chunk_size: "1mb",
            deleteImage: ctx + 'febs/images/shanchu.png',
            multiSelect: true,//是否多选
            maxNum: 5,//上传最大数
            isDetail: false,
            defaultData: []//初始化回显图片，格式[filePath:'',fileName:'']
        }, config);
        //初始化
        this.set = function () {
            var o = this, c = o.config, html = '', showBtn = true
            if (c.defaultData && c.defaultData.length > 0 && c.maxNum == c.defaultData.length) {
                // 不显示上传按钮
                showBtn = false
            }
            //创建
            if (c.type == 0 || c.type == 1) {
                html += `<div style="display: flex;flex-wrap: wrap;row-gap: 10px;width: 100%;" class="rongqi">
							<div id="previewBox" style="display: flex;flex-wrap: wrap;column-gap: 10px;row-gap: 10px;margin-right: ${c.type == 0 && c.defaultData && c.defaultData.length > 0 ? '10px' : ''}">`
                if (c.defaultData && c.defaultData.length > 0) {
                    if (c.type == 0) {
                        c.defaultData.forEach(item => {
                            html += `<div class="imgOne" data-filename="${item.fileName}" data-filepath="${item.filePath}" data-smallPath="${item.smallPath}" style="width: 100px;height: 100px;position: relative;cursor: pointer;">
										<img class="tupian" style="width: 100%;height: 100%" src="${ctx + item.smallPath}" data-bigsrc="${ctx + item.filePath}"  /></img>
										<img src="${c.deleteImage}" class="shanchu" style="display: ${c.isDetail ? 'none' : 'block'};width: 20px;position: absolute;right: -7px;top: -7px;cursor: pointer;"/>
									</div>`
                        })
                    } else if (c.type == 1) {
                        let widthBox = $E.width()
                        let oneWidth = Math.floor(widthBox / c.maxNum)//视频的宽度
                        if (oneWidth < 200) {
                            oneWidth = 200
                        } else {
                            oneWidth = oneWidth - 10  //10是间距
                        }
                        c.defaultData.forEach(item => {
                            html += `<div class="videoOne" data-filename="${item.fileName}" data-filepath="${item.filePath}" style="width: ${oneWidth}px;height: 160px;display: flex;align-items: center;background: #333;position: relative;">
										<video controls="controls" width="100%" height="100%" src="${ctx + item.smallPath}"></video>
										<img src="${c.deleteImage}" class="shanchu" style="display: ${c.isDetail ? 'none' : 'block'};width: 20px;cursor: pointer;position: absolute;right: -7px;top: -7px;"/>
									</div>`
                        })
                    }
                }
                html += `</div><div class="upload-div" style="display: ${c.isDetail || !showBtn ? 'none' : 'block'};height: 100px;width: 100px;text-align: center;border: 1px solid #e6e6e6;cursor: pointer;position: relative;">
								<span style="font-size: 48px;height: 85px;line-height: 85px;width:100%;display: block;">+</span>
							</div></div>
				<a href="javascript:void(0)" class="upload" style="display: none;"></a>
				<div class ="big-img-div"  style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:1010;width:100%;height:100%;display:none;">
					<div style="position:absolute;">
						<img style="border:5px solid #fff;" src="">
					</div>
				</div>`;
            } else if (c.type == 2) {
                // 文件
                html += `<div style="padding-top: 4px;width: 70%;" class="rongqi">
							<div class="upload-div" style="display:${c.isDetail || !showBtn ? 'none' : 'block'};height: 30px;width: 80px;line-height:30px;color:#fff;border-radius:4px;margin-bottom:10px;text-align: center;background:#1E9FFF;cursor: pointer;">
								<span style="font-size: 14px;">上传文件</span>
							</div>
							<div style="padding-top: 4px;padding-bottom: 10px;">
							<div style="display: flex;align-items: center;height: 35px;line-height: 35px;">
								<div style="width: 50px;text-align: center;border: 1px solid #eee;font-weight: 700;">序号</div>
								<div style="width: 100px;font-weight: 700;text-align: center;border-bottom: 1px solid #eee;border-right: 1px solid #eee;border-top:1px solid #eee;">文件类型</div>
								<div style="font-weight: 700;width: ${c.isDetail ? 'calc(100% - 150px)' : 'calc(100% - 250px)'};text-align: left;padding:0 10px;box-sizing: border-box;border-bottom: 1px solid #eee;border-right: 1px solid #eee;border-top:1px solid #eee;">文件名</div>
								<div style="display:${c.isDetail ? 'none' : 'block'};width: 100px;font-weight: 700;text-align: center;border-bottom: 1px solid #eee;border-right: 1px solid #eee;border-top:1px solid #eee;">文件状态</div>
								<div style="display:${c.isDetail ? 'none' : 'block'};width: 100px;font-weight: 700;text-align: center;border-bottom: 1px solid #eee;border-right: 1px solid #eee;border-top:1px solid #eee;">操作</div>
							</div>
							<div id="previewFileBox">`
                if (c.defaultData && c.defaultData.length > 0) {
                    c.defaultData.forEach((item, index) => {
                        let type = item.fileName.substring(item.fileName.lastIndexOf(".") + 1).toLowerCase();
                        let fileType = '';
                        let filePath = ctx + 'febs/images/';
                        if (type && type.includes('doc')) {
                            fileType = filePath + 'doc.png';
                        } else if (type && type.includes('xls')) {
                            fileType = filePath +  'xlc.png';
                        } else if (type && type.includes('pdf')) {
                            fileType = filePath + 'pdf.png';
                        } else if (type && (type.includes('png') || type.includes('jpg') || type.includes('jepg'))) {
                            fileType = filePath + 'img.png'
                        } else {
                            fileType = filePath + 'file.png'
                        }
                        html += `<div class="fileOne" style="display: flex;height:35px;line-height:35px;align-items: center;width: 100%;" data-filename="${item.fileName}" data-filepath="${item.filePath}">
								<div class="xuhao" style="width: 50px;text-align: center;border-left:1px solid #eee;border-bottom:1px solid #eee;border-right:1px solid #eee;">${index + 1}</div>
									<div style="width: 100px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;"><img src="${fileType}" style="width: 30px;height: 30px;margin-top:-2px;"/></div>
								<div style="width: ${c.isDetail ? 'calc(100% - 150px)' : 'calc(100% - 250px)'};text-align: left;padding:0 10px;box-sizing: border-box;border-bottom:1px solid #eee;border-right: 1px solid #eee;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
									<a style="color:#1E9FFF;cursor: pointer;" class="viewFile" data-filePath="${item.filePath}" data-fileName="${item.fileName}">${item.fileName}</a>
								</div>
								<div style="display: ${c.isDetail ? 'none' : 'block'};width: 100px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;color:#32c787;">成功</div>
								<div style="display: ${c.isDetail ? 'none' : 'block'};width: 100px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;">
									<img src="${c.deleteImage}" class="shanchu" id = "${item.fileId}" style="width: 20px;cursor: pointer;"/>
								</div>
							</div>`
                    })
                } else {
                    html += `<div class="noData" style="width: ${c.isDetail ? 'calc(100% - 27px)' : '100%'};display: flex;color: #afacac;justify-content: center;box-sizing:border-box;border-left:1px solid #eee;border-right:1px solid #eee;border-bottom:1px solid #eee;height:50px;line-height:50px;align-items: center;text-align: center;">
								暂无数据
							</div>`
                }
                html += `</div>
							</div>
						</div>
				<a href="javascript:void(0)" class="upload" style="display: none;"></a>
				<div class ="big-img-div" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:1010;width:100%;height:100%;display:none;">
					<div style="position:absolute;">
						<img style="border:5px solid #fff;" src="">
				</div>
				</div>`;
            }

            c.$E.html(html);

            //https://www.jianshu.com/p/7a2dd72a3e21
            //实例化一个plupload上传对象
            o.uploader = new plupload.Uploader({
                runtimes: "html5,flash,silverlight,html4", //支持的上传方式以及优先级
                flash_swf_url: c.flash_swf_url, //flash上传组件的url地址
                silverlight_xap_url: c.silverlight_xap_url, //silverlight上传组件的url地址
                browse_button: c.$E.find(".upload")[0],
                url: c.url,
                filters: {
                    mime_types: [ //上传文件类型（数组）
                        {
                            title: "files", //过滤器名称
                            extensions: c.extensions[c.type] //文件扩展名，多个时用逗号隔开
                        }
                    ],
                    max_file_size: c.max_file_size, //上传文件大小（可以写b，kb，gb）
                    prevent_duplicates: false //是否允许选取重复的文件
                },
                max_retries: c.max_retries, //上传失败后的重试次数
                chunk_size: c.chunk_size, //分片上传切割大小
                unique_names: false, //是否生成唯一name
                file_data_name: "file", //文件域名称
                multi_selection: c.multiSelect,//是否多选
                defaultData: c.defaultData//初始化数据
            });

            o.uploader.init(); //初始化
            o.uploader.bind('BeforeUpload', function (uploader, files) {

            })
            //绑定文件添加进队列事件
            o.uploader.bind('FilesAdded', function (uploader, files) {
                let exitLength = 0
                if (c.type == 0) {
                    exitLength = c.$E.find('.imgOne').length
                } else if (c.type == 1) {
                    exitLength = c.$E.find('.videoOne').length
                } else {
                    exitLength = c.$E.find(".fileOne").length
                }
                let allLength = exitLength + files.length
                if (allLength > c.maxNum) {
                    layer.msg('最多上传' + c.maxNum + '个', {
                        icon: 7
                    })
                    files.forEach(item => {//删除队列中的文件
                        o.uploader.removeFile(item.id)

                    })
                    return false
                } else {
                    for (var i = 0, len = files.length; i < len; i++) {
                        var file_name = files[i].name; //文件名
                        //构造html来更新UI
                        // var html = '<span id="file-' + files[i].id +'"><p style="height: 98px;line-height: 98px;overflow: hidden;">' + file_name + '</p><p style="height: 2px;font-size: 0;line-height: 2px;background: #1890ff;width: 0;"></p></span>';
                        // c.$E.find('.upload-div').html(html);
                    }
                    o.uploader.start(); //开始上传
                    return false;
                }


            });

            //绑定文件上传进度事件
            o.uploader.bind('UploadProgress', function (uploader, file) {
                c.$E.find('#file-' + file.id + ' p:last').css('width', file.percent + '%');//控制进度条
            });
            //绑定文件上传结束事件
            o.uploader.bind('FileUploaded', function (uploader, file, responseObject) {
                // if (responseObject.status != 200) {
                // 	if(c.type==2){
                // 		// 文件上传错误就显示
                // 		let html =`<div class="fileOne" style="display: flex;height:35px;line-height:35px;align-items: center;width: 100%;" data-filename="${file.name}" data-filepath="${data.filePath}">
                // 				<div class="xuhao" style="width: 50px;text-align: center;border-left:1px solid #eee;border-bottom:1px solid #eee;border-right:1px solid #eee;">${fileIndex}</div>
                // 				<div style="width: ${c.isDetail ? 'calc(100% - 120px)' :'calc(100% - 290px)'};text-align: left;padding:0 10px;box-sizing: border-box;border-bottom:1px solid #eee;border-right: 1px solid #eee;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">${fileName}</div>
                // 				<div style="width: 70px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;"><img src="${fileType}" style="width: 30px;height: 30px"/></div>
                // 				<div style="display: ${c.isDetail ? 'none' :'block'};width: 70px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;color:#32c787;">失败</div>
                // 				<div style="display: ${c.isDetail ? 'none' :'block'};width: 100px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;">
                // 					<img src="${c.deleteImage}" class="shanchu" style="width: 20px;cursor: pointer;"/>
                // 				</div>
                // 			</div>`
                //
                // 		c.$E.find('#previewFileBox').append(html);
                // 	}else{
                // 		layer.msg(file.name+'上传失败',{
                // 			icon:7
                // 		})
                // 	}
                //
                // 	return;
                // }
                var resJson = JSON.parse(responseObject.response);
                //
                // if (resJson.code != 200) {
                // 	if(c.type==2){
                // 		// 文件上传错误就显示
                // 		let html=`<div style="display: flex;width: 100%;margin-bottom: 10px;">
                // 			<div style="width:calc(100% - 125px);white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">${file.name}</div>
                // 			<div style="color:red;margin-left: 20px;">上传失败</div>
                // 			<img src="${c.deleteImage}" class="shanchu" style="width: 20px;cursor: pointer;margin-left: 20px;"/>
                // 			</div>`
                // 		c.$E.find('#previewFileBox').append(html);
                // 	}else{
                // 		layer.msg(file.name+'上传失败',{
                // 			icon:7
                // 		})
                // 	}
                // 	return;
                // }

                if (!resJson.data) {
                    //切片请求，等待中
                    console.log(resJson);
                    return
                }

                //最后一个请求
                o.setDisplaySrc(resJson.data, file);
                if (!!c.done) {
                    c.done(resJson.data);
                }
                if (!c.multiSelect) {//单选隐藏上传按钮
                    c.$E.find(".upload-div").hide()
                }

            });

            //绑定全部文件上传结束事件
            o.uploader.bind('UploadComplete', function (uploader, file) {
                //console.info("ok");
            });

            //绑定文件上传错误事件
            o.uploader.bind('Error', function (uploader, errObject) {
                let fileSize = errObject.file.size / 1024 / 1024

                if (fileSize > 500) {
                    layer.msg('文件大小不能大于500M', {
                        icon: 7
                    })
                }
                return false
                if (c.type == 2) {
                    // 文件上传错误就显示
                    let type = errObject.file.name.substring(errObject.file.name.lastIndexOf(".") + 1).toLowerCase();
                    let fileType = '';
                    let filePath = ctx + 'febs/images/';
                    if (type && type.includes('doc')) {
                        fileType = filePath + 'doc.png'
                    } else if (type && type.includes('xls')) {
                        fileType = filePath + 'xlc.png'
                    } else if (type && type.includes('pdf')) {
                        fileType = filePath + 'pdf.png'
                    } else if (type && (type.includes('png') || type.includes('jpg') || type.includes('jepg'))) {
                        fileType = filePath + 'img.png'
                    } else {
                        fileType = filePath + 'file.png'
                    }
                    let fileIndex = c.$E.find('.fileOne').length + 1
                    let html = `<div class="fileOne" style="display: flex;height:35px;line-height:35px;align-items: center;width: 100%;" data-filename="${errObject.file.name}" data-filepath="${errObject.file.filePath}">
								<div class="xuhao" style="width: 50px;text-align: center;border-left:1px solid #eee;border-bottom:1px solid #eee;border-right:1px solid #eee;">${fileIndex}</div>
								<div style="width: 100px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;"><img src="${fileType}" style="width: 30px;height: 30px;margin-top: -2px;"/></div>
								<div style="width: calc(100% - 250px);text-align: left;padding:0 10px;box-sizing: border-box;border-bottom:1px solid #eee;border-right: 1px solid #eee;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">${errObject.file.name}</div>
								<div style="width: 100px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;color:red;">失败</div>
								<div style="width: 100px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;">
									<img src="${c.deleteImage}" class="shanchu" style="width: 20px;cursor: pointer;"/>
									<span class="reUpload" style="background: #1E9FFF;color:#fff;padding:1px 5px;cursor: pointer;border-radius: 4px;">重新上传</span>
								</div>
							</div>`

                    c.$E.find('#previewFileBox').append(html);
                } else if (c.type == 0) {
                    let htmlI = `<div class="imgOne" style="width: 100px;height: 100px;position: relative;cursor: pointer;"><img class="tupian" style="width: 100%;border: 1px solid #eeee;height: 100%" src="${ctx + 'febs/images/error.png'}" /></img><img src="${c.deleteImage}" class="shanchu" style="width: 20px;position: absolute;right: -7px;top: -7px;cursor: pointer;"/></div>`
                    c.$E.find('#previewBox').append(htmlI);
                    c.$E.find('#previewBox').css('margin-right', '10px')
                } else {
                    let widthBox = $E.find('.rongqi').width()
                    let oneWidth = Math.floor(widthBox / c.maxNum)//视频的宽度
                    if (oneWidth < 200) {
                        oneWidth = 200
                    } else {
                        oneWidth = oneWidth - 10  //10是间距
                    }
                    // 视频上传失败
                    let htmlV = '<div class="videoOne" style="width: 100px;height: 100px;display: flex;align-items: center;position: relative;"><img class="tupian" style="width: 100%;border: 1px solid #eeee;height: 100%" src="' + ctx + 'febs/images/error.png' + '" /></img><img src="' + c.deleteImage + '" class="shanchu" style="width: 20px;cursor: pointer;position: absolute;right: -7px;top: -7px;"/></div>';
                    c.$E.find('#previewBox').append(htmlV);
                }
                let filesLength = 0
                if (c.type == 0) {
                    filesLength = $E.find('.imgOne').length
                } else if (c.type == 1) {
                    filesLength = $E.find('.videoOne').length
                } else {
                    filesLength = $E.find('.fileOne').length
                }

                if (filesLength >= c.maxNum) {//等于最大上传数量就隐藏上传按钮
                    $E.find('.upload-div').hide();
                }

                return false
                // 文件上传错误就显示
                // var html=`<div style="display: flex;width: 100%;"><div style="width:calc(100% - 125px);white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">${errObject.file.name}</div><div style="color:red;margin-left: 20px;">上传失败</div><img src="${c.deleteImage}" class="shanchu" style="width: 20px;cursor: pointer;margin-left: 20px;"/></div>`
                // c.$E.find('#previewFileBox').append(html);
                // }
                // var html = '<span><p class="file-name">上传失败：' + errObject.code + ',' + errObject.message + '</p><p class="progress"></p></span>';
                // c.$E.find('.upload-div').html(html);
                // c.$E.find(".shanchu").show();
                c.done(errObject);
            });

            $E.find(".big-img-div img").load(function (e) {
                var windowW = $(window).width();//获取当前窗口宽度
                var windowH = $(window).height();//获取当前窗口高度
                var realWidth = this.width;//获取图片真实宽度
                var realHeight = this.height;//获取图片真实高度
                var imgWidth, imgHeight;
                var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
                var maxW = windowW * scale;
                var maxH = windowH * scale;
                var percentW = maxW / realWidth;
                var percentH = maxH / realHeight;

                var percent = Math.max(percentW, percentH);
                imgWidth = realWidth * percent;
                imgHeight = realHeight * percent;
                if (imgWidth > maxW) {
                    imgHeight = maxW / imgWidth * imgHeight;
                    imgWidth = maxW;
                }
                if (imgHeight > maxH) {
                    imgWidth = maxH / imgHeight * imgWidth;
                    imgHeight = maxH;
                }
                //以最终的宽度对图片缩放
                $(this).css("width", imgWidth).css("height", imgHeight);
                var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
                var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
                $(this).parent().css({"top": h, "left": w});//设置#innerdiv的top和left属性
                // $E.find(".big-img-div").fadeIn("fast");//淡入显示#outerdiv及.pimg
                $(e.currentTarget).parents('.big-img-div').fadeIn("fast");
            });
            $E.find(".big-img-div").click(function () {//再次点击淡出消失弹出层
                $(this).fadeOut("fast");
            });
        };

        this.setDisplaySrc = function (data, file) {
            $('.noData').hide()
            fileArr.push(file)
            var o = this, c = o.config;
            let fileName = file.name
            $E = $(c.elem);
            if (data !== null) {
                c.responseData = data;
                // $E.find(".shanchu").show();
                $E.find(".upload-div").css("padding-top", "0");
                var html = '';
                let widthBox = $E.find('.rongqi').width()
                let oneWidth = Math.floor(widthBox / c.maxNum)//视频的宽度
                if (oneWidth < 200) {
                    oneWidth = 200
                } else {
                    oneWidth = oneWidth - 10  //10是间距
                }
                let filesLength = 0
                if (c.type == 0) {
                    html = '<div class="imgOne" data-filename="' + data.fileName + '" data-filepath="' + data.filePath + '"  data-smallPath="' + data.smallPath + '" style="width: 100px;height: 100px;position: relative;cursor: pointer;"><img class="tupian" style="width: 100%;height: 100%" src="' + ctx + data.smallPath + '" data-bigsrc="' + ctx + data.filePath + '" /></img><img src="' + c.deleteImage + '" class="shanchu" style="width: 20px;position: absolute;right: -7px;top: -7px;cursor: pointer;"/></div>';
                } else if (c.type == 1) {
                    html = '<div class="videoOne" data-filename="' + data.fileName + '" data-filepath="' + data.filePath + '" style="width: ' + oneWidth + 'px;height: 160px;display: flex;align-items: center;background: #333;position: relative;"><video controls="controls" width="100%" height="100%" src="' + ctx + data.smallPath + '"></video><img src="' + c.deleteImage + '" class="shanchu" style="width: 20px;cursor: pointer;position: absolute;right: -7px;top: -7px;"/></div>';
                } else {
                    let fileIndex = $E.find('.fileOne').length + 1
                    let type = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
                    let fileType = '';
                    let filePath = ctx + 'febs/images/';
                    if (type && type.includes('doc')) {
                        fileType = filePath + 'doc.png'
                    } else if (type && type.includes('xls')) {
                        fileType = filePath + 'xlc.png'
                    } else if (type && type.includes('pdf')) {
                        fileType = filePath + 'pdf.png'
                    } else if (type && (type.includes('png') || type.includes('jpg') || type.includes('jepg'))) {
                        fileType = filePath + 'img.png'
                    } else {
                        fileType = filePath + 'file.png'
                    }
                    html = `<div class="fileOne" style="display: flex;height:35px;line-height:35px;align-items: center;width: 100%;" data-filename="${data.fileName}" data-filepath="${data.filePath}">
								<div class="xuhao" style="width: 50px;text-align: center;border-left:1px solid #eee;border-bottom:1px solid #eee;border-right:1px solid #eee;">${fileIndex}</div>
								<div style="width: 100px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;"><img src="${fileType}" style="width: 30px;height: 30px;margin-top: -2px;"/></div>
								<div style="width: calc(100% - 250px);text-align: left;padding:0 10px;box-sizing: border-box;border-bottom:1px solid #eee;border-right: 1px solid #eee;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
									<a style="color:#1E9FFF;cursor: pointer;" class="viewFile" data-filePath="${data.filePath}" data-fileName="${fileName}">${fileName}</a>
								</div>
								<div style="width: 100px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;color:#32c787;">成功</div>
								<div style="width: 100px;text-align: center;border-bottom:1px solid #eee;border-right: 1px solid #eee;">
									<img src="${c.deleteImage}" class="shanchu" style="width: 20px;cursor: pointer;"/>
								</div>
							</div>`
                }
                // $E. find('.upload-div').html(html);
                if (c.type == 0 || c.type == 1) {
                    $E.find('#previewBox').append(html);
                    if (c.type == 0) {
                        c.$E.find('#previewBox').css('margin-right', '10px')
                    }
                } else {
                    $E.find('#previewFileBox').append(html);
                }
                if (c.type == 0) {
                    filesLength = $E.find('.imgOne').length
                } else if (c.type == 1) {
                    filesLength = $E.find('.videoOne').length
                } else {
                    filesLength = $E.find('.fileOne').length
                }

                if (filesLength >= c.maxNum) {//等于最大上传数量就隐藏上传按钮
                    $E.find('.upload-div').hide();
                }
            }
        };

        this.getResponseData = function () {
            var o = this, c = o.config;
            return c.responseData;
        };

        this.captureImage = function () {
            $E = $(c.elem);
            var video = $E.find(".upload-div video")[0];
            var canvas = $E.find(".big-img-div canvas")[0];
            var scaleW = canvas.width / video.videoWidth;
            var scaleH = canvas.height / video.videoHeight;
            var scale = Math.min(scaleW, scaleH);
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            return canvas.toDataURL("image/png");
        };
    };

    //渲染一个实例
    obj.prototype.render = function () {
        var o = this, c = o.config;
        $E = $(c.elem);
        if ($E.length == 0) {
            console.error(MOD_NAME + ' hint：找不到容器 ' + c.elem);
            return false;
        }
        c.$E = $E;
        c.filter = c.filter == '' ? c.elem.replace('#', '').replace('.', '') : c.filter;
        c.name = c.name == '' ? c.elem.replace('#', '').replace('.', '') : c.name;
        o.config = c;
        //初始化
        o.set();
        //监听点击事件
        $E.on('click', '.shanchu', function (e) {
            //删除图片
            if (c.type == 0 || c.type == 1) {
                $(this).parent().remove();
            } else {
                let id = this.id

                $(this).parent().parent().remove();
                if (id) {
                    if (!!c.delUrl) {
                        $.get(c.delUrl + '/' + id, function (result) {
                            layer.msg("文件删除成功！")
                        })
                    }
                    if (!!c.del) {
                        c.del(id);
                    }
                }


                // 删除后更新序号
                c.$E.find(".xuhao").each((v, h) => {
                    $(h).html(v + 1)
                })
            }

            if (!c.multiSelect) {
                c.$E.find(".upload-div").show()
            }
            let filesLength = 0
            if (c.type == 0) {
                filesLength = c.$E.find(".imgOne").length
            } else if (c.type == 1) {
                filesLength = c.$E.find(".videoOne").length
            } else {
                filesLength = c.$E.find(".fileOne").length
            }
            if (filesLength == 0) {
                $('.noData').show()
                if (c.type == 0) {
                    c.$E.find('#previewBox').css('margin-right', '0px')
                }
            }
            if (filesLength < c.maxNum) {//小于于最大上传数量就显示上传按钮
                c.$E.find('.upload-div').show();

            }
            // var html = '<span style="font-size: 48px;height: 85px;line-height: 85px;width: 100%;display: block;">+</span>';
            // c.$E.find(".upload-div").html(html);
        });
        // 重新上传
        $E.on('click', '.reUpload', function (e) {
            o.uploader.refresh()
            o.uploader.start()

            // let index = e.currentTarget.dataset.index
            // console.log(fileArr)
            //
            // let file = {
            // 	loaded:fileArr[0].loaded,
            // 	name:fileArr[0].name,
            // 	origSize:fileArr[0].origSize,
            // 	percent:fileArr[0].percent,
            // 	size:fileArr[0].size,
            // 	type:fileArr[0].type
            // }
            // debugger
            // // o.File(fileArr[0])
            // $.ajax({
            // 	url:c.url,
            // 	type:'post',
            // 	contentType:'application/json',
            // 	data: {file:fileArr[0]},
            // 	success:function (res){
            // 		debugger
            // 	}
            // })
        })
        $E.on('click', '.viewFile', function (e) {
            let filePath = e.currentTarget.dataset.filepath
            let fileName = e.currentTarget.dataset.filename

            if (commonJS.isEmpty(filePath)) {
                layer.msg("数据异常，请联系管理员！")
                return false;
            }
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET", ctx + filePath, false);
            xmlhttp.send();

            if (xmlhttp.readyState === 4) {
                if (xmlhttp.status === 200) {
                    commonJS.previewImgOrPdf(filePath, fileName, c.$E)
                } //url存在
                else if (xmlhttp.status === 404) {
                    layer.msg("文件丢失，请联系管理员！")
                    return false;
                } //url不存在
                else {
                    {
                        layer.msg("文件丢失，请联系管理员！")
                        return false;
                    }
                }//其他状态
            }
        })

        $E.on('click', '.tupian', function (e) {
            //显示大图
            var src = $(this).data("bigsrc");
            c.$E.find(".big-img-div img").attr("src", src);
        });
        //监听点击事件
        $E.on('click', '.upload-div span', function (e) {
            //上传图片
            $(c.elem + ' .upload')[0].click(e);
        });
    };
    //输出模块
    exports(MOD_NAME, fileUpload);
});
